<html xmlns:wicket="http://wicket.apache.org/">
<head>
<title><wicket:message key="title">Generic sortable/filterable/pageable table</wicket:message></title>
</head>
<body>
<wicket:panel>
	<!--  the pager/filter top block -->
	<form wicket:id="filterForm" class="clearfix">
		<div class="float-start">
			<span wicket:id="navigatorTop">1|2|3|...</span>
		</div>
		<div class="float-end">
			<input id="filter" wicket:id="filter" class="me-1 search" type="text" size="35" title="Search" placeholder="Search" wicket:message="placeholder:Search"/>
			<input wicket:id="submit" class="d-none" type="submit" value="Search"/>
			<span class="help-link" title="Enclose the search term in quotes for exact-term search." wicket:message="title:search.help"></span>
			<script type="text/javascript">
				$('input, textarea').placeholder();
			</script>
			<a href="#" id="clear" wicket:id="clear" class="float-end" title="clear the filter">Clear</a>
		</div>
	</form>

	<!--  the table -->
	<table wicket:id="listContainer">
		<thead>
			<tr>
			  <!-- The select all checkbox -->
			  <th wicket:id="selectAllContainer"><input type="checkbox" wicket:id="selectAll"/></th>
			  <!-- This is a repeater, will generate one th for each property -->
			  <th wicket:id="sortableLinks"><div wicket:id="header"></div></th>
			</tr>
		</thead>
		<tbody>
			<tr wicket:id="items">
			  <!-- The select row checkbox -->
			  <th wicket:id="selectItemContainer" class="selection"><input type="checkbox" wicket:id="selectItem"/></th>
			  <!-- This is a repeater, will generate one td for each property -->
			  <td wicket:id="itemProperties"><span wicket:id="component"></span></td>
			</tr>
		</tbody>
	</table>

	<!-- the bottom pager -->
	<span wicket:id="navigatorBottom">1|2|3|...</span>

	<!-- Sortable header fragments -->
	<wicket:fragment wicket:id="sortableHeader">
		<a href="#" wicket:id="link"><span wicket:id="label"></span></a>
	</wicket:fragment>

	<!-- Pagination fragment -->
	<wicket:fragment wicket:id="pagingFragment">
           <span class="paginator" wicket:id="navigator">1|2|3|...</span>
           <span wicket:id="filterMatch">Matched xxx out of yyy</span>
	</wicket:fragment>

	<wicket:child></wicket:child>
</wicket:panel>
</body>
</html>
